<ion-view view-title="订单列表">
    <ion-content>
<div class="my-container" style="margin-top: 60px">
    <div class="panel panel-default">
        <div class="panel-body">
            <div>
                <span class="pull-right">
                <span>已取消</span>
                </span>
                <span class="order-num">订单号：<span>A11842</span></span>
            </div>
            <hr style="margin-top:5px; margin-bottom:5px;">
            <div style="font-size:10px;">下单时间：2015-05-26 11:22:55</div>
            <hr style="margin-top:5px; margin-bottom:5px;">
            <div class="row">
                <a href="javascript:void(0)" style="display:block;" ui-sref="home.orderdetail">
                    <div class="col-xs-4">
                        <img src="images/pic2.jpg" width="100%">
                    </div>
                    <div class="col-xs-8" style="padding-left:0px;">
                        <div class="order-pname">首付779，马代-4沙</div>
                        <div class="order-ptype"></div>
                        <span style="font-size:12px; color:#999;">出游日期：2015年07月10日 星期五</span>
                    </div>
                </a>
            </div>
            <hr style="margin-top:5px; margin-bottom:5px;">
            <div class="order-price">
                <span class="order-price-right">金额：<span style="font-size:18px; color:#FF0000">¥779.00</span></span>
            </div>
            <hr style="margin-top:5px; margin-bottom:5px;">
            <div class="row order-btn-group">
                <div class="col-xs-4"><a class="btn btn-order-info order-detail-btn" id="order-detail">订单明细</a></div>
            </div>

            <!--   以下这两个玩意儿是点击订单明细出来的结果 两种判断  订单取消状态被点击出来的    -->
            <div class="order-follow order-detail-info" style="display: none;" id="order-cancel">
                <span class="order-follow-boder">◆</span>
                <span class="order-follow-bg">◆</span>
                <div class="row">
                    <div class="col-xs-5">2015-05-26 11:22</div>
                    <div class="col-xs-7">订单已取消</div>
                </div>
            </div>

            <!--   以下这两个玩意儿是点击订单明细出来的结果 两种判断  订单成功后状态被点击出来的    -->
            <div class="order-follow refund-detail-info" style="display: none;" id="order-succeed">
                <span class="order-follow-boder">◆</span>
                <span class="order-follow-bg">◆</span>
                <div class="row">
                    <div class="col-xs-2">首付</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年03月03日</div>
                    </div>
                    <div class="col-xs-3"><a>已付款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">一期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年04月02日</div>
                    </div>
                    <div class="col-xs-3"><a>已付款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">二期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年05月10日</div>
                    </div>
                    <div class="col-xs-3"><a class="btn btn-refund">立即还款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">三期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年06月01日</div>
                    </div>
                    <div class="col-xs-3"><a class="btn btn-refund-inver">等待还款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">四期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年07月10日</div>
                    </div>
                    <div class="col-xs-3"><a class="btn btn-refund-inver">等待还款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">五期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年08月10日</div>
                    </div>
                    <div class="col-xs-3"><a class="btn btn-refund-inver">等待还款</a></div>
                </div>
                <div class="row">
                    <div class="col-xs-2">六期</div>
                    <div class="col-xs-7">
                        <div>还款金额：999.00元</div>
                        <div>还款日期：2015年09月10日</div>
                    </div>
                    <div class="col-xs-3"><a class="btn btn-refund-inver">等待还款</a></div>
                </div>
            </div>

        </div>
    </div>
</div>
    </ion-content>
</ion-view>